<header class="site-header">
  <a id="skiplink" href="#main-content">{{ i18n "header_skip_nav" }}</a>
  <div class="wrapper">
    <a class="site-title" href="{{ .Site.Home.RelPermalink }}"><img src="/images/letsencrypt-logo-horizontal.svg" alt="Let's Encrypt"></a>

    <span id="menuIcon">
      <i class="fas fa-bars"></i>
    </span>
    <nav class="site-nav" id="menu">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          {{ range .Site.Menus.main }}
          <li class="pure-menu-item{{ if .HasChildren }} pure-menu-has-children{{ end }}">
            <a href="{{ if .HasChildren }}#{{ else }}{{ .URL }}{{ end }}" class="pure-menu-link" tabindex="0">{{ .Name }}</a>
            {{ if .HasChildren }}
            <ul class="pure-menu-children">
              {{ range .Children }}
              <li class="pure-menu-item">
                <a href="{{ .URL }}" class="pure-menu-link">{{ .Name }}</a>
              </li>
              {{ end }}
            </ul>
            {{ end }}
          </li>
          {{ end }}
          {{ $home := .Site.Home }}
          {{ $langs := slice }}
          {{ if .Translations }}
            {{ range .AllTranslations }}
              {{ $langs = $langs | append . }}
            {{ end }}
          {{ else }}
            {{ range $home.AllTranslations }}
              {{ $langs = $langs | append . }}
            {{ end }}
          {{ end }}
          {{ if gt (len $langs ) 1 }}
          <li class="pure-menu-item pure-menu-has-children">
            <a href="#" class="pure-menu-link" tabindex="0">{{ i18n "languages" }} <img src="/images/language-icon128px-black.png" class="inline-icon" alt="" aria-hidden="true"></a>
            <ul class="pure-menu-children">
              {{ range $langs }}
              {{ $isCurrentLang := eq $home.Language .Language }}
              <li class="pure-menu-item">
                <a href="{{ .RelPermalink }}" lang="{{ .Language.Params.languageCode }}" hreflang="{{ .Language.Params.languageCode }}" class="pure-menu-link">{{ if $isCurrentLang  }}✓ {{ end }}{{ .Language.LanguageName }}</a>
              </li>
              {{ end }}
            </ul>
          </li>
          {{ end }}
        </ul>
      </div>
    </nav>
  </div>
</header>
<div id="main-content"></div>
